<template>
  <div>
    这个是next---父组件---{{ num }}
    <p ref="pRef">{{ num }}</p>
    <hr>
    <button @click="hClick">父组件中add</button>
    <Son ref="mySon" :num="num" />
  </div>
</template>
<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      num: 100

    }
  },
  methods: {
    hClick() {
      this.num++
      console.log(this.num, 'this.num') // 101
      // dom更新是异步的
      // 怎么解决这个问题呢
      //  this.$nextTick: 保证dom更新完成之后,再执行回调函数
      this.$nextTick(() => {
        console.log(this.$refs.pRef.innerHTML, '  this.$refs.pRef.innerHTML')
        // 在父组件中获取子组件中的属性 || 获取调用里面的方法  ？？？
        console.log(this.$refs.mySon.num, ' this.$refs.mySon.num')
      })
      // 微任务 Promise------  >dom的更新  ------>宏任务  setTimeout  事件
      setTimeout(() => {
        console.log(this.$refs.pRef.innerHTML, ' setTimeout')
        // 在父组件中获取子组件中的属性 || 获取调用里面的方法  ？？？
        console.log(this.$refs.mySon.num, ' setTimeout')
      }, 0)
    }
  }
}
</script>

